<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      * {
        margin: 0;
        padding: 0;
      }
      ul {
        list-style: none;
        border-bottom: 1px solid #066;
      }
      a {
        color: #fff;
        text-decoration: none;
        display: block;
      }
      .menu {
        position: fixed;
        display: none;
        width: 220px;
      }
      li {
        line-height: 40px;
        border-top: 1px solid #066;
        background-color: #0a0;
        padding-left: 20px;
      }
      li:hover {
        background-color: #060;
      }
    </style>
  </head>
  <body>
    <div class="menu">
      <ul>
        <li>
          <a href="#">主页</a>
        </li>
        <li>
          <a href="#">充值</a>
        </li>
        <li>
          <a href="#">复制</a>
        </li>
        <li>
          <a href="#">下载</a>
        </li>
      </ul>
    </div>
    <script>
      var div = document.querySelector('.menu')
      document.oncontextmenu = function (e) {
        e.preventDefault()
        div.style.display = 'block'
        div.style.top = e.clientY + 'px'
        div.style.left = e.clientX + 'px'
      }
      document.onmousedown = function () {
        div.style.display = ''
      }
    </script>
  </body>
</html>
